import './style.css'
import {initFlowGraph, renderFlowGraph} from '@dreamof2080/flow-view'
import data from './data.txt'
import data2 from './data2.txt'

function component () {
  // 流程图div
  const container = document.createElement('div')
  container.classList.add('container')
  // 节点信息div
  const nodeInfo = document.createElement('div')
  nodeInfo.classList.add('node-info')
  const p1 = document.createElement('p')
  p1.innerHTML = '未查看: 章三，里斯'
  nodeInfo.appendChild(p1)
  const p2 = document.createElement('p')
  p2.innerHTML = '未提交: 章三，里斯'
  nodeInfo.appendChild(p2)
  const p3 = document.createElement('p')
  p3.innerHTML = '已提交: 王五'
  nodeInfo.appendChild(p3)
  // 缩略图vid
  const thumbnail = document.createElement('div')
  thumbnail.classList.add('thumbnail')
  document.body.appendChild(container)
  document.body.appendChild(nodeInfo)
  document.body.appendChild(thumbnail)

  // 初始化流程图
  const graph = initFlowGraph({
    container,
    shadowColor: '#050505',
    flowedEdgeColor: '#525050',
    onClick: (id, left, top) => {
      nodeInfo.style.display = id ? 'block' : 'none'
      nodeInfo.style.left = left + 'px'
      nodeInfo.style.top = top + 'px'
    },
    thumbnail
  });
  // 渲染流程图
  renderFlowGraph({
    graph,
    data: data2,
    currentIds: ['ff80808177389ca401776166e46e013e', 'ff80808177389ca401775caec0b700f3'],
    flowedEdgeIds: ['ff80808177389ca401775c97f23a00de', 'ff80808177389ca401776166e4990140', 'ff80808177389ca401775caec0fd00f4'],
  })
}

component()
